<script setup>
import { ref, unref, watch, computed, onMounted } from 'vue'
import PhoneModal from '@/components/PersonalInfo/PhoneModal.vue'
import MailModal from '@/components/PersonalInfo/MailModal.vue'
import { queryCustomerInfo } from '@/api/home'
import { useAccountStore } from '@/stores/account'
import { useOpenReservationPage } from '@/composables/open-link.js'
import ResetPwdVisible from './ResetPwdModal.vue'
import { queryUserNameList, checkAccount } from '@/api/account'

const props = defineProps({
  insuredList: {
    type: Array,
    default: () => []
  },
  insuredInfo: {
    type: Object,
    required: () => {}
  },
  policyInfo: {
    type: Object,
    required: () => {}
  }
})
const emit = defineEmits(['updateInsuredInfoFun'])
// 脱敏
const accountStore = useAccountStore()
const isEyeOpen = computed(() => {
  return accountStore.DESENSITIZATION
})
// 脱敏
watch(
  () => isEyeOpen.value,
  (newValue, oldValue) => {
    getPersonInfoData()
  }
)

// 基本信息接口初始化
onMounted(() => {
  getPersonInfoData()
  getuserNameList()
})

const fieldNames = { label: 'name', value: 'doc_id' }
const selectedInsuredIdModel = defineModel()
const resetPwdVisible = ref(false)
const personalInfo = ref({})
const accountErrormsg = ref('')
async function getPersonInfoData(el) {
  const { memberId, customerId } = unref(props.insuredInfo)
  let res = null
  try {
    const data = {
      desensitization: unref(isEyeOpen) ? '02' : '01',
      customerID: (el && el.customerId) || customerId,
      memberID: memberId
    }
    res = await queryCustomerInfo(data)
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    personalInfo.value = res.data
  }
}
const insuredName = computed(() => {
  return props.insuredList.find((item) => item.doc_id == unref(selectedInsuredIdModel))?.name
})
function handleChange(_, el) {
  emit('updateInsuredInfoFun')
  getPersonInfoData(el)
}
// mail modal
const mailModalVisible = ref(false)
let mailInfo = ref({})
function openMailModal(info = {}) {
  mailModalVisible.value = true
  mailInfo.value = { ...personalInfo.value, ...info }
}

// phone modal
const phoneModalVisible = ref(false)
function openPhoneModal() {
  phoneModalVisible.value = true
}

// 欣服务账号管理
const CarouselRef = ref(null)
function changeCarousel() {
  CarouselRef.value.next()
}
const userNameList = ref([])
async function getuserNameList() {
  console.log('insuredInfo', props.policyInfo)
  let res = null
  try {
    const data = {
      customId: props.insuredInfo.customerId
    }
    res = await queryUserNameList(data)
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    if (res.data.accountInfoDTO) {
      userNameList.value = splitArrayIntoPairs([...res.data.accountInfoDTO])
    } else {
      accountErrormsg.value = res.data.errorMsg
    }
  }
}
function splitArrayIntoPairs(arr) {
  return arr.reduce((result, value, index) => {
    if (index % 2 === 0) {
      result.push([value])
    } else {
      result[result.length - 1].push(value)
    }
    return result
  }, [])
}
function getPopupContainer(triggerNode) {
  return triggerNode.parentNode.parentNode
}
function searchReservation() {
  useOpenReservationPage({ ...props.policyInfo, operation: '02' })
}
function sendSMS() {
  useOpenReservationPage({ ...props.policyInfo, operation: '05' })
}
const accountInfo = ref(null)
function openPwdModal(account) {
  resetPwdVisible.value = true
  accountInfo.value = account
}
</script>
<template>
  <div class="person-info">
    <div class="info-left">
      <div class="info-left-name">
        <div class="info-left-name-header">
          <div class="tooltip">
            <a-tooltip placement="topLeft" :getPopupContainer="getPopupContainer">
              <template #title>{{ insuredName }}</template>
              <a-select
                ref="select"
                class="custom-select"
                :dropdownMatchSelectWidth="false"
                :getPopupContainer="getPopupContainer"
                :dropdownStyle="{
                  minWidth: '400px'
                }"
                @change="handleChange"
                :bordered="false"
                v-model:value="selectedInsuredIdModel"
                :field-names="fieldNames"
                :options="insuredList"
              >
              </a-select>
            </a-tooltip>
          </div>
          <div class="info-left-icon">
            <svg-icon class="icon-home-mail" name="home-mail" @click="openMailModal" />
            <svg-icon class="icon-home-phone" size="18" name="home-phone" @click="openPhoneModal" />
          </div>
        </div>

        <a-descriptions
          class="person-description"
          :column="2"
          :labelStyle="{ color: '#fff' }"
          :contentStyle="{ color: '#fff' }"
        >
          <a-descriptions-item
            :labelStyle="{ fontWeight: 500 }"
            :contentStyle="{ fontWeight: 'bold' }"
            :label="$t('home.personal.Gender')"
            >{{ personalInfo.gender || '-' }}</a-descriptions-item
          >
          <a-descriptions-item
            :labelStyle="{ fontWeight: 500 }"
            :contentStyle="{ fontWeight: 'bold' }"
            :label="$t('home.personal.Birthday')"
            >{{ personalInfo.birthday || '-' }}</a-descriptions-item
          >
          <a-descriptions-item
            :labelStyle="{ fontWeight: 500 }"
            :contentStyle="{ fontWeight: 'bold' }"
            :label="$t('home.personal.IDInfo')"
          >
            <a-tooltip :getPopupContainer="getPopupContainer">
              <template #title>
                <div>{{ personalInfo.id_type }}</div>
                <div>{{ personalInfo.id_no }}</div>
              </template>
              <span> {{ personalInfo.id_no || '-' }}</span>
            </a-tooltip>
          </a-descriptions-item>
          <a-descriptions-item
            :labelStyle="{ fontWeight: 500 }"
            :contentStyle="{ fontWeight: 'bold' }"
            :label="$t('home.personal.Nationality')"
            >{{ personalInfo.membersnationality || '-' }}</a-descriptions-item
          >
        </a-descriptions>
      </div>
    </div>
    <div class="info-center">
      <div class="info-center-message info-center-common">
        <svg-icon size="40" class="cursor-pointer" name="home-msg" @click="sendSMS" />
        <span class="cursor-pointer" @click="sendSMS"> {{ $t('home.personal.SendSMS') }}</span>
      </div>
      <div class="info-center-reservation info-center-common">
        <svg-icon
          class="cursor-pointer"
          size="40"
          name="home-reservation"
          @click="searchReservation"
        />
        <span class="cursor-pointer info-center-text" @click="searchReservation">{{
          $t('home.personal.AppointmentInfo')
        }}</span>
      </div>
    </div>
    <div class="info-right">
      <div class="info-right-title">
        <span> {{ $t('home.personal.MSHServiceAccountInfo') }}</span>
        <svg-icon
          v-if="userNameList.length > 1"
          size="26"
          @click="changeCarousel"
          name="home-right-arrow"
        />
      </div>
      <div v-if="accountErrormsg" class="account-errormsg">
        {{ accountErrormsg }}
      </div>
      <a-carousel ref="CarouselRef" :dots="false" v-else>
        <div v-for="(accountItem, index) in userNameList" class="account-box" :key="index">
          <div class="account-item" v-for="(accountObj, index) in accountItem" :key="index">
            <span>{{ accountObj.account }}</span>
            <span class="account-pwd" @click="openPwdModal(accountObj)">{{
              $t('home.personal.ResetPwd')
            }}</span>
          </div>
        </div>
      </a-carousel>
    </div>
    <PhoneModal
      :phone-info="personalInfo"
      v-if="phoneModalVisible"
      @updateVisible="(visible) => (phoneModalVisible = visible)"
      @openMailModal="openMailModal"
    ></PhoneModal>
    <MailModal
      v-if="mailModalVisible"
      :mail-info="mailInfo"
      @updateVisible="(visible) => (mailModalVisible = visible)"
    ></MailModal>
    <ResetPwdVisible
      v-if="resetPwdVisible"
      :accountInfo="accountInfo"
      :insuredInfo="insuredInfo"
      :policyInfo="policyInfo"
      @updateVisible="(visible) => (resetPwdVisible = visible)"
    ></ResetPwdVisible>
  </div>
</template>
<style lang="scss" scoped>
.person-info {
  display: flex;
  :deep(.ant-select-selector)::after {
    margin-left: 10px !important;
  }
  .info-left {
    flex: 1;
    min-width: 600px;
    height: 175px;
    background: #729db0;
    box-shadow: 0px 0px 6px 0px rgba(0, 58, 84, 0.08);
    border-radius: 10px;
    padding: 28px 29px;
    position: relative;

    .person-description {
      margin-top: 30px;
      padding: 0 11px;
    }
    &-icon {
      display: flex;
      align-items: center;
      .icon-home-mail {
        width: 24px;
        height: 18px;
        margin-right: 20px;
      }
      .svg-icon {
        cursor: pointer;
      }
    }

    &-name {
      &-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tooltip {
          flex: 1;
        }
      }
      .ant-select {
        // flex: 1;
        // width: 363px;
        // width: 100%;
        height: 30px;
        font-weight: bold;
        font-size: 22px;
        color: #ffffff;
        :deep(.ant-select-arrow) {
          color: #fff;
        }
        :deep(.ant-select-selection-item) {
          color: #fff;
          font-weight: bold;
          font-size: 22px;
        }
      }
      @media screen and (max-width: 1450px) {
        .ant-select {
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          white-space: nowrap;
          // flex: 1;
        }
      }
    }
  }
  .info-center {
    width: 300px;
    min-width: 230px;
    margin: 0 20px;
    &-common {
      height: 80px;
      background: #729db0;
      box-shadow: 0px 0px 6px 0px rgba(0, 58, 84, 0.08);
      border-radius: 10px;
      display: flex;
      align-items: center;
      padding: 0 30px;
      font-weight: bold;
      font-size: 17px;
      color: #ffffff;
      .svg-icon {
        margin-right: 24px;
      }
    }
    &-message {
      margin-bottom: 15px;
    }
    &-text {
      flex: 1;
    }
  }
  .info-right {
    width: 356px;
    min-width: 288px;
    height: 175px;
    background: #729db0;
    box-shadow: 0px 0px 6px 0px rgba(0, 58, 84, 0.08);
    border-radius: 10px;
    padding: 24px 28px;
    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
      }
      .svg-icon {
        color: #6a92a4;
        cursor: pointer;
      }
    }
    .account-box {
      .account-item:last-child {
        border: none;
      }
    }
    .account-item {
      height: 62px;
      // font-weight: 500;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #ffffff;
      border-bottom: 1px solid #b4cbd5;
    }
    .account-pwd {
      font-weight: bold;
      text-decoration-line: underline;
      cursor: pointer;
    }
    .account-errormsg {
      font-size: 14px;
      color: #ffffff;
      padding-top: 20px;
    }
  }
}
</style>
